<template>
  <div class="commission-container">
    <el-tabs v-model="activeTab" type="border-card" style="margin: 16px;">
      <el-tab-pane label="任务看板" name="taskBoard">
        <!-- 导入并显示任务看板组件 -->
        <TaskBoard />
      </el-tab-pane>
      <el-tab-pane label="任务维护" name="taskMaintenance">
        <!-- 任务维护页面内容 -->
        <div class="tab-content">
          <div class="empty-state">
            <el-empty description="任务维护功能开发中..." />
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="待办清单" name="todoList">
        <!-- 待办清单页面内容 -->
        <div class="tab-content">
          <div class="empty-state">
            <el-empty description="待办清单功能开发中..." />
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="责任人代表" name="responsibilityDelegate">
        <!-- 责任人代表页面内容 -->
        <div class="tab-content">
          <div class="empty-state">
            <el-empty description="责任人代表功能开发中..." />
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
// 导入任务看板组件
import TaskBoard from './Commission/TaskBoard.vue'

// 激活的标签页
const activeTab = ref('taskBoard')
</script>

<style scoped>
.commission-container {
  padding: 0;
  margin: 0;
  width: 100%;
  min-height: 100vh;
  background-color: #f5f7fa;
}

.tab-content {
  padding: 20px;
  min-height: 600px;
}

.empty-state {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 500px;
}

/* 调整Tab样式 */
:deep(.el-tabs__header) {
  margin-bottom: 0 !important;
}

:deep(.el-tabs__content) {
  padding: 16px;
  background-color: white;
  min-height: calc(100vh - 80px);
}
</style>
